<template>
  <div class="global-skeleton" v-show="loading">
    <div class="skeleton-header">
      <el-skeleton-item variant="rect" style="width: 100%; height: 60px" />
    </div>
    <div class="skeleton-body">
      <el-skeleton 
        :rows="5" 
        animated
        :throttle="300">
        <template #template>
          <el-skeleton-item variant="h3" style="width: 20%" />
          <div style="margin: 20px 0">
            <el-skeleton-item variant="rect" style="width: 100%; height: 40px" />
          </div>
          <el-skeleton-item variant="rect" style="width: 100%; height: 400px" />
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GlobalSkeleton',
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.global-skeleton {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 9999;
}
.skeleton-header {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.skeleton-body {
  padding: 20px;
}

/* 骨架屏动画 */
@keyframes skeleton-animation {
  0% { background-position: 100% 50% }
  100% { background-position: 0 50% }
}

.el-skeleton__item {
  background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
  background-size: 400% 100%;
  animation: skeleton-animation 1.4s ease infinite;
}
</style> 